{extend name="base" /}
{block name="body"}
<div class="layui-body">
    <!--tab标签-->
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">配置管理</li>
        </ul>
        <div class="layui-tab-content">
			<div class="layui-tab" lay-filter="configtab">
				<ul class="layui-tab-title">
					<li class="layui-this">基本</li>
					<li>系统</li>
					<li>上传</li>
					<li>开发</li>
					<li>数据库</li>
				</ul>
				<div class="layui-tab-content">
					{for start="0" end="5"}
						<div class="layui-tab-item {eq name="i" value="0"}layui-show{/eq}">
							<div class="layui-row">
								<div class="layui-col-md9">
									<div class="layui-btn-group">
										<a title="新增" icon="fa fa-pencil" class="layui-btn" data-method="Add"><i class="fa fa-pencil"></i>&nbsp;&nbsp;<span class="bold">新增</span></a>
										<a title="启用" icon="fa fa-pencil" class="layui-btn layui-bg-blue" data-method="Open"><i class="fa fa-server"></i>&nbsp;&nbsp;<span class="bold">启用</span></a>
										<a title="启用" icon="fa fa-pencil" class="layui-btn layui-bg-orange" data-method="Ban"><i class="fa fa-info-circle"></i>&nbsp;&nbsp;<span class="bold">禁用</span></a>
										<a title="启用" icon="fa fa-pencil" class="layui-btn layui-bg-red" data-method="Delete"><i class="fa fa fa-close"></i>&nbsp;&nbsp;<span class="bold">删除</span></a>
									</div>
								</div>
								<div class="layui-col-md3">
										<div class="layui-inline">
											<label class="layui-form-label">关键词</label>
											<div class="layui-input-inline">
												<input type="text" name="keyword" value="" placeholder="请输入关键词" class="layui-input keyword">
											</div>
										</div>
										<div class="layui-inline">
											<button class="layui-btn" data-method="reload">搜索</button>
										</div>
								</div>
							</div>
							<hr>
							<table class="layui-hide" id="test{$i}" lay-filter="info"></table>
						</div>
					{/for}
					
				</div>
			</div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script type="text/html" id="barDemo">
<!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> -->
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="statusTpl">
	{{#  if(d.status == 0){ }}
	<input type="checkbox" name="open" lay-skin="switch" lay-filter="status" lay-text="正常|禁用" value="1" data-id="{{d.id}}">
	{{#  } else if (d.status == 1){ }}
	<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="status"  lay-text="正常|禁用" value="0" data-id="{{d.id}}">
	{{#  } }}
</script>

<script>
var tindex = 0;
var tname = new Array("base","system","upload","develop","database");
	layui.use(['element', 'layer','table','form'], function(){
	var table = layui.table
	,element = layui.element
	,form = layui.form
	,layer = layui.layer;
		//重新渲染
		render();
		
		//监听表格工具条
		table.on('tool(info)', function(obj){
			var data = obj.data   //获得当前行数据
			,layEvent = obj.event;//获得 lay-event 对应的值
			if(layEvent === 'del'){
				layer.confirm('是否删除该配置信息',function(index){
						//加载层
						var load = layer.load(1, {
						shade: [0.3,'#fff'] //0.3透明度的白色背景
						}); //0代表加载的风格，支持0-2
						$.ajax({
							url:"{:url('delete')}",
							data:{id:data.id},
							timeout:10000,
							success:function(data){
								obj.del();
								layer.close(load); 
								layer.msg(data.msg);
							}
						});	
				});
			} else if(layEvent === 'edit'){
					layer.open({
					type: 2,
					title:'编辑配置',
					area: ['805px', '705px'],
					fixed: false, //不固定
					maxmin: true,
					content: "{:url('edit')}?id="+ data.id
					});
			}
		});
		
		
		//监听表格单元格编辑
		table.on('edit', function(obj){
			var value = obj.value //得到修改后的值
			,data = obj.data //得到所在行所有键值
			,field = obj.field; //得到字段	
			var info = {};
			info['id'] = data.id;
			info[field] = value;
			$.ajax({
				url:"{:url('update')}",
				data:info,
				type: 'POST',
				success:function(result){
					render();
					layer.msg(result.msg);
				}
			});
		});
		
		//监听表格状态编辑
		form.on('switch(status)', function(data){
		var value = data.value
		,obj = data.elem;
		console.log(value);
		var info = {};
		info['id'] = $(obj).attr("data-id");
		info['status'] = value;
		console.log(info);
		$.ajax({
			url:"{:url('update')}",
			data:info,
			type: 'POST',
			success:function(result){
				render();
				layer.msg(result.msg);
			}
		});
		}); 
		
		//监听TAB切换
		element.on('tab(configtab)', function(data){
			tindex = data.index;
			//执行一个 table 实例
			// console.log(tindex);
			render();

		});
		
		//执行表格渲染
		function render(){
			console.log(tindex);
			table.render({
				elem: '#test' + tindex
				{/*,url:"{:url('/admin/config/getinfo')&cc;"*/}
				// ,data: {group:tname[tindex]}
				,url: '/admin/config/getinfo?group='+ tname[tindex] //数据接口adfv
				,page: true //开启分页
				,limit:15
				,id: 'tableReload'
				,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				,cols: [[ //表头
				{type:'checkbox',}
				,{field: 'name', title: '变量名称',sort: true,edit: 'text'}
				,{field: 'title', title: '变量标题',edit: 'text'}
				,{field: 'type', title: '变量类型',width:200}
				,{field: 'value', title: '变量内容',edit: 'text'}
				,{field: 'status', title: '变量状态',width:120,templet: '#statusTpl', align:'center'} 
				,{field: 'sort', title: '排序',width:100, sort: true, edit: 'text'}
				,{fixed: 'right',title: '操作',width:120, toolbar: '#barDemo'}
				]]
			});
		}
		
			//触发事件
			var $ = layui.$, active = {
				Add: function(){
					var that = this; 
							layer.open({
							type: 2,
							title:'新增配置',
							area: ['805px', '705px'],
							fixed: false, //不固定
							maxmin: true,
							data:{type:name[tindex]},
							content: "{:url('admin/config/add')}"//'/admin/config/add?type=' + tname[tindex]
							});
				},
				Delete: function(){
					//加载层
					var load = layer.load(1, {
					shade: [0.3,'#fff'] //0.3透明度的白色背景
					}); //0代表加载的风格，支持0-2
					var arr = new Array();
					var checkStatus = table.checkStatus('test' + tindex)
							,data = checkStatus.data;
							$(data).each(function(){
									arr.push($(this)[0].id);
								});
							var url = "";
							if (arr == undefined || arr == null || arr.length == 0){
								layer.close(load);
								layer.msg('请勾选后再批量删除');
							}else{
								url = 'delete.html?id='+arr;
								$.ajax({
									url: url,
									timeout:10000,
									success:function(data){
										layer.close(load); 
										layer.msg(data.msg);
										table.reload('test' + tindex);
									}
								});
							}
				},
				Open: function(){
					//加载层
					var load = layer.load(1, {
					shade: [0.3,'#fff'] //0.3透明度的白色背景
					}); //0代表加载的风格，支持0-2
					var arr = new Array();
					var checkStatus = table.checkStatus('test' + tindex)
							,data = checkStatus.data;
							$(data).each(function(){
									arr.push($(this)[0].id);
								});
							arr = arr.reverse();//倒序排列
							var url = "";
							if (arr == undefined || arr == null || arr.length == 0){
								layer.close(load);
								layer.msg('请勾选后再批量启用');
							}else{
								url = 'change.html?id='+ arr +'&status=1';
								$.ajax({
									url: url,
									timeout:10000,
									success:function(data){
										layer.close(load); 
										layer.msg(data.msg);
										table.reload('test' + tindex);
									}
								});
							}
				},
				Ban: function(){
					//加载层
					var load = layer.load(1, {
					shade: [0.3,'#fff'] //0.3透明度的白色背景
					}); //0代表加载的风格，支持0-2
					var arr = new Array();
					var checkStatus = table.checkStatus('test' + tindex)
							,data = checkStatus.data;
							$(data).each(function(){
									arr.push($(this)[0].id);
								});
							arr = arr.reverse();//倒序排列
							var url = "";
							if (arr == undefined || arr == null || arr.length == 0){
								layer.close(load);
								layer.msg('请勾选后再批量禁用');
							}else{
								url = 'change.html?id='+ arr +'&status=0';
								$.ajax({
									url: url,
									timeout:10000,
									success:function(data){
										layer.close(load); 
										layer.msg(data.msg);
										table.reload('test' + tindex);
									}
								});
							}
				},
				reload: function(){
				 	
			      var keyword = $(this).parents().find('.keyword').val();
			      //执行重载
			      table.reload('tableReload', {
			        page: {
			          curr: 1 //重新从第 1 页开始
			        }
			        ,where: {
			            keyword: keyword
			        }
			      });
			    }
			};
			
			$('.layui-btn').on('click', function(){
				var  method = $(this).data('method');
				active[method] ? active[method].call(this) : '';
			});
		
		
	
	});
//console.log(tindex);
</script>
{/block}